<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid springgreen;
        }
        .happy {
            background-color: coral;
        }
        .sad {
            background-color: green;
        }
        .normal {
            background-color: skyblue;
        }
        .atguigu1 {
            background-color: rgba(255, 255, 0,0.664);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .atguigu2 {
            font-size: 30px;
        }
        .atguigu3 {
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <!-- 
        绑定样式:
            1. class样式
                写法:class="xxx" xxx可以是字符串、对象、数组。
                    字符串写法适用于:类名不确定,要动态获取。
                    对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
                    数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
            2. style样式
                :style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。 
    -->

    <div id="app">
        <!-- 绑定class样式，字符串写法，适用于:样式的类名不确定,需要动态指定 -->
        <div class="basic" v-bind:class="attribute" @click="changeMood">{{name}}</div><br/><br/>

         <!-- 绑定class样式，数组写法，适用于:样式的个数不确定,名字也不确定 -->
        <div class="basic" v-bind:class="classArr">{{name}}</div><br/><br/>

        <!-- 绑定class样式，对象写法，适用于:样式的个数确定,名字也确定，但要动态决定用不用 -->
        <div class="basic" v-bind:class="classObj">{{name}}</div><br/><br/>

        <div class="basic" v-bind:style="styleObj">{{name}}</div>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: '尚硅谷',
               attribute: 'normal',
               classArr: ["atguigu1","atguigu2","atguigu3"],
               classObj: {
                   atguigu1: false,
                   atguigu2: false  
               },
               styleObj: {
                    fontSize: '30px',
                    color: 'red',
                    backgroundColor: 'orange'
               }
           },
           methods:{
                changeMood(){
                    const arr = ["normal","sad","happy"];
                    const index = Math.floor(Math.random()*3);
                    console.log(index);
                    this.attribute=arr[index];
                }
           }
        });
    </script>
</body>

</html>